/**
 * 动态调整前端字体大小
 * 通过修改CSS变量来全局调整不同尺寸的字体和行高
 * @param size 基准字体大小，基于此大小计算其他相关字体大小
 */
export function changeFontSize(size: number) {
  // 创建一个新的样式元素
  const styleSheet = document.createElement('style');
  // 设置样式元素的类型
  styleSheet.type = 'text/css';
  // 定义CSS的根选择器
  const root = `:root`;
  // 定义并应用一系列基于传入size参数的CSS变量
  styleSheet.innerText = `${root}{
    --td-font-size-link-small: ${size - 2}px;
    --td-font-size-link-medium: ${size}px;
    --td-font-size-link-large: ${size + 2}px;
    --td-font-size-mark-small: ${size - 2}px;
    --td-font-size-mark-medium: ${size}px;
    --td-font-size-body-small: ${size - 2}px;
    --td-font-size-body-medium: ${size}px;
    --td-font-size-body-large: ${size + 2}px;
    --td-font-size-title-small: ${size}px;
    --td-font-size-title-medium: ${size + 2}px;
    --td-font-size-title-large: ${size + 6}px;
    --td-font-size-headline-small: ${size + 10}px;
    --td-font-size-headline-medium: ${size + 14}px;
    --td-font-size-headline-large: 36px;
    --td-font-size-display-medium: 48px;
    --td-font-size-display-large: 64px;
    --td-line-height-link-small: ${size + 6}px;
    --td-line-height-link-medium: ${size + 8}px;
    --td-line-height-link-large: ${size + 10}px;
    --td-line-height-mark-small: ${size + 6}px;
    --td-line-height-mark-medium: ${size + 8}px;
    --td-line-height-body-small: ${size + 6}px;
    --td-line-height-body-medium: ${size + 8}px;
    --td-line-height-body-large: ${size + 10}px;
    --td-line-height-title-small: ${size + 8}px;
    --td-line-height-title-medium: ${size + 10}px;
    --td-line-height-title-large: ${size + 14}px;
    --td-line-height-headline-small: 32px;
    --td-line-height-headline-medium: 36px;
    --td-line-height-headline-large: 44px;
    --td-line-height-display-medium: 56px;
    --td-line-height-display-large: 72px;
  `;
  // 将样式元素添加到文档的头部，使其生效
  document.head.appendChild(styleSheet);
}
